<template>
    <!-- 蒙层 -->
    <!-- <view clas="c-mask" v-if="showInputPop" class="c-mask" @click.stop="emit('closeInputPop')"
        @touchmove.stop.prevent="emit('disableScroll')">
    </view> -->
    <view class="popup-comment" v-if="showInputPop">
        <view class="comment-input-wrap">
            <view class="dispaly-center">
                <view class="comment-textarea-box" @touchmove.stop.prevent="emit('disableScroll')">
                    <textarea auto-height confirm-type="send" @confirm="commentCommit" v-model="commentParams.content"
                        class="comment-textarea" :maxlength="600" :focus="replyFocus" :placeholder="customPlaceholder"
                        :show-confirm-bar="false" @focus="commentInputFocus" @blur="commentInputBlur"
                        :adjust-position="true" :cursor-spacing="400" :cursor="cursorIndex" @input="inputFocusChange"
                        :fixed="true" />
                    <!-- <view class="limit">{{ commentParams.content?.length || 0 }} / 600</view> -->
                </view>
                <view class="relase-btn">
                    <!-- 表情 和 图片 -->
                    <view class="emoji-image">
                        <!-- 选择上传图片 -->
                        <view class="as-image icon-a-44tubiao-81" hover-class="checkActive" :hover-stay-time="100"
                            @click="selectMediaImage">
                            <image src="/static/icon/add.png" style="width: 50rpx;height: 50rpx;" />
                        </view>
                        <!-- 表情 -->
                        <view class="emoji icon-biaoqing-xue" hover-class="checkActive" :hover-stay-time="100"
                            @click="openEmoji" v-if="!showEmoji">
                            <image src="/static/icon/emoji.png" style="width: 50rpx;height: 50rpx;" />
                        </view>
                        <!-- 键盘 -->
                        <view v-else class="keyboard k icon-a-44tubiao-155" hover-class="checkActive"
                            :hover-stay-time="100" @click="openKeyboard">
                            <image src="/static/icon/key1.png"
                                style="width: 60rpx;height: 60rpx;margin-right: 15rpx;" />
                        </view>
                        <!-- 发布 -->
                        <view class="keyboard icon-a-44tubiao-155" @click.stop="commentCommit" hover-class="checkActive"
                            :hover-stay-time="100">
                            <image src="/static/icon/send.png" style="width:50rpx;height: 50rpx;" />
                        </view>
                        <!-- <view class="relase" @click.stop="commentCommit" hover-class="button-hover"
                            :hover-stay-time="100">
                            发布
                        </view> -->
                    </view>

                </view>
            </view>
            <view class="image-list">
                <view class="image-item" v-for="(item, index) in commentImages" :key="index">
                    <image class="image" :src="item" mode="aspectFill" @click.stop="previewCommentImage(item)"></image>
                    <uni-icons class="icon-close" @click.stop="deleteOneCommentImage(index)" type="clear" size="20"
                        color="#red"></uni-icons>
                </view>
            </view>

            <list class="emoji-data" :show-scrollbar="false" v-if="showEmoji">
                <view v-for="(item, index) in emojiDataList" :key="index" class="emoji-item" hover-class="checkActive"
                    :hover-stay-time="100" @click.stop="tuchCurrentEmoji(item)">
                    <text class="emoj_conn">{{ item }}</text>
                </view>
            </list>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { uploadImage } from '@/utils/util'

const props = defineProps({
    showInputPop: {
        type: Boolean,
        default: false,
    },
})

const emit = defineEmits([
    'closeInputPop',
    'disableScroll',
    'update:showInputPop',
    'send'
])

// 新增评论入参
const commentParams = ref({ content: '' } as any)

// 评论上传的图片
const commentImages = ref<string[]>([])

// 点击回复控制textarea的聚焦
const replyFocus = ref(false)
// 默认的提示内容
const customPlaceholder = ref<string>('说点什么...')
// 是否显示表情包
const showEmoji = ref(false)
// 表情包列表
const emojiDataList = ref([
    '🤞',
    '👍',
    '👏',
    '❤',
    '😁',
    '🖐',
    '😀',
    '😃',
    '😄',
    '😁',
    '😆',
    '😅',
    '😂',
    '🤣',
    '😊',
    '😇',
    '🙂',
    '🙃',
    '😉',
    '😌',
    '😍',
    '🥰',
    '😘',
    '😗',
    '😙',
    '😚',
    '😋',
    '😛',
    '😝',
    '😜',
    '🤪',
    '🤨',
    '🧐',
    '🤓',
    '😎',
    '🤩',
    '🥳',
    '😏',
    '😒',
    '😞',
    '😔',
    '😟',
    '😕',
    '🙁',
    '😣',
    '😖',
    '😫',
    '😩',
    '🥺',
    '😢',
    '😭',
    '😤',
    '😠',
    '😡',
    '🤬',
    '🤯',
    '😳',
    '🥵',
    '🥶',
    '😱',
    '😨',
    '😰',
    '😥',
    '😓',
    '🤗',
    '🤔',
    '🤭',
    '🤫',
    '🤥',
    '😶',
    '😐',
    '😑',
    '😬',
    '🙄',
    '😯',
    '😦',
    '😧',
    '😮',
    '😲',
    '😴',
    '🤤',
    '😪',
    '😵',
    '🤐',
    '🥴',
    '🤢',
    '🤮',
    '🤧',
    '😷',
    '🤒',
    '🤕',
    '🤑',
    '🤠',
    '👻',
    '🐧',
])
// 记录当前光标位置
const cursorIndex = ref(0)
// 评论时鼠标光标 的位置
const cursorInputIndex = ref(-1)
// 评论框打开
const inputFocus = (type: number, e?: any) => {
    nextTick(() => {
        replyFocus.value = true
        cursorIndex.value = cursorInputIndex.value
        // 如果是根评论（当前文章直接评论而不是回复别人的评论）
        if (type === 1) {
            customPlaceholder.value = '输入评论'
            commentParams.value.pCode = ''
        } else {
            // 如果是回复评论
            if (e) {
                commentParams.value.pCode = e.code
                customPlaceholder.value = `回复${e.nickname}`
            }
        }
    })
}

// 评论框聚焦
const commentInputFocus = (event: any) => {
    replyFocus.value = true
    showEmoji.value = false
}
// 评论失焦
const commentInputBlur = (event: any) => {
    cursorInputIndex.value = event.detail.cursor
    replyFocus.value = false
}
// 选中表情
const tuchCurrentEmoji = (item: string) => {
    if (cursorInputIndex.value > 0) {
        const start = commentParams.value.content?.substring(0, cursorInputIndex.value)
        const end = commentParams.value.content?.substring(
            cursorInputIndex.value,
            commentParams.value.content?.length,
        )
        commentParams.value.content = start + item + end
    } else {
        commentParams.value.content += item
    }
    cursorInputIndex.value += item?.length
}
// 输入时光标的位置
const inputFocusChange = (event: any) => {
    cursorInputIndex.value = event.detail.cursor
}

// 预览评论的图片
const previewCommentImage = (image: string) => {
    uni.previewImage({
        current: image,
        urls: commentImages.value,
    })
}

// 删除某一张评论图片
const deleteOneCommentImage = (index: number) => {
    commentImages.value.splice(index, 1)
}

// 选择上传媒体相册中的图片 uniapp的方法
const selectMediaImage = async () => {
    const res = await uploadImage(20, 'album', 'duo') as string[]
    commentImages.value = res
}

// 打开表情包
const openEmoji = () => {
    replyFocus.value = false
    showEmoji.value = true
}

// 打开键盘
const openKeyboard = () => {
    showEmoji.value = false
    replyFocus.value = true
}

const closeInputPop = () => {
    replyFocus.value = false
    emit('update:showInputPop', false)
    commentParams.value.pCode = ''
}

// 提交评论
const commentCommit = async () => {
    commentParams.value.content = commentParams.value.content?.trim()
    //  || !commentImages.value.length
    if (!commentParams.value.content.length) {
        uni.showToast({
            title: '不能发送空消息',
            icon: 'none'
        })
    } else {
        emit('send', { imgList: commentImages.value, content: commentParams.value.content })
        commentImages.value = []
        commentParams.value.content = ''
        showEmoji.value = false
    }
}
defineExpose({
    inputFocus,
})
</script>

<style lang="scss">
.c-mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-comment {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100vw;
    background-color: #fff;

    .comment-input-wrap {
        padding: 20rpx 30rpx;
        display: flex;
        flex-direction: column;

        .comment-textarea-box {
            position: relative;
            flex: 4;
            margin-right: 20rpx;

            .comment-textarea {
                border-radius: 20rpx;
                min-height: 80rpx;
                width: 100%;
                background-color: #f6f6f6;
                font-size: 26rpx;
                padding: 20rpx 20rpx 0 20rpx;
            }

            .limit {
                // 定位到textarea 的 右下角
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                font-size: 20rpx;
                color: #767676;
            }
        }

        .image-list {
            display: flex;
            flex-wrap: wrap;
            margin: 10rpx 0;

            .image-item {
                position: relative;
                width: 90rpx;
                height: 90rpx;
                margin-right: 10rpx;
                background-color: #fff;

                .image {
                    border-radius: 20rpx;
                    width: 100%;
                    height: 100%;
                }

                .icon-close {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                }
            }
        }

        .relase-btn {
            display: flex;
            justify-content: space-between;
            // align-items: center;
            // margin-top: 10rpx;
            flex: 1.5;

            // padding: 0 20rpx;
            .emoji-image {
                display: flex;
                align-items: center;
                font-size: 48rpx;
                color: #3d3d3d;

                .as-image,
                .emoji {
                    margin-right: 15rpx;
                }
            }

            .limit {
                font-size: 24rpx;
                color: #767676;
            }

            .relase {
                background-color: $uni-color-primary;
                border-radius: 10rpx;
                font-size: 26rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10rpx 20rpx;
            }
        }

        .emoji-data {
            display: flex;
            flex-wrap: wrap;
            height: 300rpx;
            overflow: scroll;
            margin-top: 16rpx;

            .emoji-item {
                padding: 10rpx;
            }

            .emoj_conn {
                font-size: 40rpx;
            }
        }
    }
}
</style>